<template>
    <div>
        <!--        面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item  v-for="(item,index) in navData" :key="index">{{ item }}</el-breadcrumb-item>
            <!--        <el-button @click="onNavClick">123</el-button>-->
        </el-breadcrumb>

<!--        <h2>{{msg}}</h2>-->
    </div>
</template>

<script>
export default {
    name: "Breadcrumb",
    props: {
        navData:{
            type: Array,
            default: []
        }
    },
    // props: ["navData"]
    //如果组件中data不是一个函数 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
 /*   data:{
        msg:"你好世界"
    },*/
    data(){
        return{
            msg:"你好世界"
        }
    },
    methods:{
        onNavClick(){
            console.log("===>")
            this.$emit("onNavClick","1234");
            this.$bus.$emit("onNavClick123","1234");
        }
    }
}
</script>
<!--<script>

/*let obj = {
        name: "哈哈"
    };

let obj1 = obj;
let obj2 = obj;
obj2.name = "呵呵";
console.log(obj1.name)
console.log(obj2.name)*/

/*let obj = {//0x001
    name: "哈哈"
};
function fn(){
    return obj //0x001
}
let obj1 = fn();//0x001
let obj2 = fn();//0x001
obj2.name = "呵呵";
console.log(obj1.name)*/

function fn(){
    return {
        name: "哈哈"
    }
}
let obj1 = fn();//0x0001
let obj2 = fn();//0x0002
obj2.name = "呵呵";
console.log(obj1.name)

</script>-->
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
</style>